<!DOCTYPE html>
<html lang="en">
	<head>

		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>菜单管理</title>

		<!--Favicon -->
		<link rel="icon" href="favicon.ico" type="image/x-icon"/>

		<!--Bootstrap.min css-->
		<link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css">

		<!--Icons css-->
		<link rel="stylesheet" href="assets/css/icons.css">

		<!--Style css-->
		<link rel="stylesheet" href="assets/css/style.css">

		<!--mCustomScrollbar css-->
		<link rel="stylesheet" href="assets/plugins/scroll-bar/jquery.mCustomScrollbar.css">

		<!--Sidemenu css-->
		<link rel="stylesheet" href="assets/plugins/toggle-menu/sidemenu.css">

		<!--DataTables css-->
		<link rel="stylesheet" href="assets/plugins/Datatable/css/dataTables.bootstrap4.css">

		<!--Toastr css-->
		<link rel="stylesheet" href="assets/plugins/toastr/build/toastr.css">
		<link rel="stylesheet" href="assets/plugins/toaster/garessi-notif.css">

		<!--Bootstrap-daterangepicker css-->
		<link rel="stylesheet" href="assets/plugins/bootstrap-daterangepicker/daterangepicker.css">

		<!--Bootstrap-datepicker css-->
		<link rel="stylesheet" href="assets/plugins/bootstrap-datepicker/bootstrap-datepicker.css">

		<!--iCheck css-->
		<link rel="stylesheet" href="assets/plugins/iCheck/all.css">

		<!--Bootstrap-colorpicker css-->
		<link rel="stylesheet" href="assets/plugins/bootstrap-colorpicker/bootstrap-colorpicker.min.css">

		<!--Bootstrap-timepicker css-->
		<link rel="stylesheet" href="assets/plugins/bootstrap-timepicker/bootstrap-timepicker.min.css">

		<!--Select2 css-->
		<link rel="stylesheet" href="assets/plugins/select2/select2.css">

		<!--TreeTable css-->
		<link rel="stylesheet" href="assets/plugins/layui/css/layui.css">

		<!--yorick css-->
		<link rel="stylesheet" href="assets/css/yorick-style.css">

	</head>

	<body class="app ">

		<div id="spinner"></div>

		<div id="app">
			<div class="main-wrapper" >
				<nav class="navbar navbar-expand-lg main-navbar">
					<a class="header-brand" href="index.html">
						<img src="assets/img/brand/logo.png" class="header-brand-img" alt="Kharna-Admin  logo">
					</a>
					<form class="form-inline mr-auto">
						<ul class="navbar-nav mr-3">
							<li><a href="#" data-toggle="sidebar" class="nav-link nav-link-lg"><i class="ion ion-navicon-round"></i></a></li>
						</ul>
					</form>
					<ul class="navbar-nav navbar-right">
						<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link  nav-link-lg beep"><i class="ion-ios-bell-outline"></i></a>
							<div class="dropdown-menu dropdown-list dropdown-menu-right">
								<div class="dropdown-header">Notifications
									<div class="float-right">
										<a href="#">View All</a>
									</div>
								</div>
								<div class="dropdown-list-content">
									<a href="#" class="dropdown-item">
										<i class="fa fa-users text-primary"></i>
										<div class="dropdown-item-desc">
											<b>So many Users Visit your template</b>
										</div>
									</a>
									<a href="#" class="dropdown-item">
										<i class="fa fa-exclamation-triangle text-danger"></i>
										<div class="dropdown-item-desc">
											<b>Error message occurred....</b>
										</div>
									</a>
									<a href="#" class="dropdown-item">
										<i class="fa fa-users text-warning"></i>
										<div class="dropdown-item-desc">
											<b> Adding new people</b>
										</div>
									</a>
									<a href="#" class="dropdown-item">
										<i class="fa fa-shopping-cart text-success"></i>
										<div class="dropdown-item-desc">
											<b>Your items Arrived</b>
										</div>
									</a>
									<a href="#" class="dropdown-item">
										<i class="fa fa-comment text-primary"></i>
										<div class="dropdown-item-desc">
											<b>New Message received</b> <div class="float-right"><span class="badge badge-pill badge-danger badge-sm">67</span></div>
										</div>
									</a>
									<a href="#" class="dropdown-item">
										<i class="fa fa-users text-primary"></i>
										<div class="dropdown-item-desc">
											<b>So many Users Visit your template</b>
										</div>
									</a>
								</div>
							</div>
						</li>
						<li class="dropdown dropdown-list-toggle">
							<a href="#" class="nav-link nav-link-lg full-screen-link">
								<i class="ion-arrow-expand"  id="fullscreen-button"></i>
							</a>
						</li>
						<li class="dropdown"><a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle nav-link-lg">
							<img alt="profile-user" class="rounded-circle banner-head">
							<div class="d-sm-none d-lg-inline-block banner-name">Jessica Lee</div></a>
							<div class="dropdown-menu dropdown-menu-right">
								<a href="#" id="changePasswordPanelBtn" class="dropdown-item has-icon">
									<i class="ion ion-android-person"></i> 修改密码
								</a>
								<a href="#" class="dropdown-item has-icon" id="logoutBtn">
									<i class="ion-ios-redo"></i> 退出
								</a>
							</div>
						</li>
					</ul>
				</nav>

				<aside class="app-sidebar">
					<div class="app-sidebar__user">
					    <div class="dropdown">
							<a class="nav-link pl-2 pr-2 leading-none d-flex" data-toggle="dropdown" href="#">
								<img alt="image" class="avatar-md rounded-circle banner-head">
								<span class="ml-2 d-lg-block">
									<span class="text-white app-sidebar__user-name mt-5 banner-name">Jessica Lee</span><br>
									<span class="text-muted app-sidebar__user-name text-sm banner-department" data-toggle="tooltip" data-placement="right"> Web-Designer</span>
								</span>
							</a>
						</div>
					</div>
					<ul class="side-menu">
						<li class="slide">
							<a class="side-menu__item"  data-toggle="slide" href="#"><i class="side-menu__icon fa fa-desktop"></i><span class="side-menu__label">欢迎页面</span><i class="angle fa fa-angle-right"></i></a>
							<ul class="slide-menu">
								<li><a class="slide-item"  href="index.html"><span>首页面板</span></a></li>
							</ul>
						</li>
						<div id="sideMenuItem"></div>
					</ul>
				</aside>

				<div class="app-content">
					<section class="section">
                    	<ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="javascript:location.reload();">账户管理</a></li>
                            <li class="breadcrumb-item active" aria-current="page">账户列表</li>
                        </ol>

						<div class="row">
							<div class="col-lg-12">
								<div class="card">
									<div class="card-header">
										<a href="#" class="btn btn-sm btn-primary m-b-5 m-t-5 btn-header" id="addMenuPanelBtn">新增菜单</a>
									</div>
									<div class="card-body">
										<div id="menuList"></div>
									</div>
								</div>
							</div>
						</div>

					</section>
				</div>

				<footer class="main-footer">
					<div class="text-center">
						Copyright &copy;Kharna-Admin 2018. Edited By<a href="https://gitee.com/yorickromantic"> Yorick</a>
					</div>
				</footer>

			</div>
		</div>
		<div class="modal fade" id="editMenuModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" style="display: none;">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title" id="editMenuModalLabel">编辑菜单</h5>
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">×</span>
						</button>
					</div>
					<div class="modal-body">
						<form class="form-horizontal">
							<div class="form-group row" hidden>
								<div class="col-md-12">
									<input type="text" id="resourceId" class="form-control" disabled>
								</div>
							</div>
							<div class="form-group row">
								<label class="col-md-3 col-form-label"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">菜单描述</font></font></label>
								<div class="col-md-9">
									<input type="text" id="resourceDesc" class="form-control" placeholder="请输入菜单描述">
								</div>
							</div>
							<div class="form-group row">
								<label class="col-md-3 col-form-label"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">菜单名称</font></font></label>
								<div class="col-md-9">
									<input type="text" id="resourceName" class="form-control" placeholder="请输入模块名称">
								</div>
							</div>
							<div class="form-group row">
								<label class="col-md-3 col-form-label"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">菜单路由</font></font></label>
								<div class="col-md-9">
									<input type="text" id="resourceString" class="form-control" placeholder="请输入菜单路由">
								</div>
							</div>
							<div class="form-group mb-0">
								<label style='margin-right: 10px;'>
									<input type="radio" name="enabled" class="flat-purple" value="1">
									<span>启用</span>
								</label>
								<label style='margin-right: 10px;'>
									<input type="radio" name="enabled" class="flat-purple" value="0">
									<span>禁用</span>
								</label>
							</div>
						</form>

					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-success" data-dismiss="modal">取消</button>
						<button type="button" class="btn btn-outline-primary" id="addChildMenuPanelBtn">新增子菜单</button>
						<button type="button" class="btn btn-primary" id="editMenuBtn">修改</button>
					</div>
				</div>
			</div>
		</div>
		<div class="modal fade" id="addMenuModal" tabindex="1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" style="display: none;">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title" id="addMenuModalLabel">新增菜单</h5>
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">×</span>
						</button>
					</div>
					<div class="modal-body">
						<form class="form-horizontal">
							<div class="form-group row" hidden>
								<div class="col-md-12">
									<input type="text" id="parentId" class="form-control">
								</div>
							</div>
							<div class="form-group row">
								<label class="col-md-3 col-form-label"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">菜单描述</font></font></label>
								<div class="col-md-9">
									<input type="text" id="addResourceDesc" class="form-control" placeholder="请输入菜单描述">
								</div>
							</div>
							<div class="form-group row">
								<label class="col-md-3 col-form-label"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">菜单名称</font></font></label>
								<div class="col-md-9">
									<input type="text" id="addResourceName" class="form-control" placeholder="请输入模块名称">
								</div>
							</div>
							<div class="form-group row">
								<label class="col-md-3 col-form-label"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">菜单路由</font></font></label>
								<div class="col-md-9">
									<input type="text" id="addResourceString" class="form-control" placeholder="请输入菜单路由">
								</div>
							</div>
						</form>

					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-success" data-dismiss="modal">取消</button>
						<button type="button" class="btn btn-primary" id="addMenuBtn">创建</button>
					</div>
				</div>
			</div>
		</div>
		<div class="modal fade" id="changePasswordModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" style="display: none;">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title" id="changePasswordModalLabel">修改密码</h5>
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">×</span>
						</button>
					</div>
					<div class="modal-body">
						<form class="form-horizontal">
							<div class="form-group row">
								<label class="col-md-3 col-form-label"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">旧密码</font></font></label>
								<div class="col-md-9">
									<input type="password" id="oldPassword" class="form-control" placeholder="请输入旧密码" autocomplete="new-password"/>
								</div>
							</div>
							<div class="form-group row">
								<label class="col-md-3 col-form-label"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">新密码</font></font></label>
								<div class="col-md-9">
									<input type="password" id="newPassword" class="form-control" placeholder="请输入新密码" autocomplete="new-password"/>
								</div>
							</div>
							<div class="form-group row">
								<label class="col-md-3 col-form-label"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">重复新密码</font></font></label>
								<div class="col-md-9">
									<input type="password" id="newPassword2" class="form-control" placeholder="请再次输入新密码" autocomplete="new-password"/>
								</div>
							</div>
						</form>

					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-success" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary" id="changePasswordBtn">确定</button>
					</div>
				</div>
			</div>
		</div>

		<!--Jquery.min js-->
		<script src="assets/js/jquery.min.js"></script>

		<!--popper js-->
		<script src="assets/js/popper.js"></script>

		<!--Tooltip js-->
		<script src="assets/js/tooltip.js"></script>

		<!--Bootstrap.min js-->
		<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>

		<!--Jquery.nicescroll.min js-->
		<script src="assets/plugins/nicescroll/jquery.nicescroll.min.js"></script>

		<!--Scroll-up-bar.min js-->
		<script src="assets/plugins/scroll-up-bar/dist/scroll-up-bar.min.js"></script>

		<!--Sidemenu js-->
		<script src="assets/plugins/toggle-menu/sidemenu.js"></script>

		<!--mCustomScrollbar js-->
		<script src="assets/plugins/scroll-bar/jquery.mCustomScrollbar.concat.min.js"></script>

		<!--DataTables js-->
		<script src="assets/plugins/Datatable/js/jquery.dataTables.js"></script>
		<script src="assets/plugins/Datatable/js/dataTables.bootstrap4.js"></script>

		<!--Scripts js-->
		<script src="assets/js/scripts.js"></script>

		<!--Toastr js-->
		<script src="assets/plugins/toastr/build/toastr.min.js"></script>
		<script src="assets/plugins/toaster/garessi-notif.js"></script>

		<!--iCheck js-->
		<script src="assets/plugins/iCheck/icheck.min.js"></script>

		<!--forms js-->
		<script src="assets/js/forms.js"></script>

		<!--Inputmask js-->
		<script src="assets/plugins/inputmask/jquery.inputmask.js"></script>

		<!--Select2 js-->
		<script src="assets/plugins/select2/select2.full.js"></script>

		<!--Moment js-->
		<script src="assets/plugins/moment/moment.min.js"></script>

		<!--Bootstrap-daterangepicker js-->
		<script src="assets/plugins/bootstrap-daterangepicker/daterangepicker.js"></script>

		<!--Bootstrap-datepicker js-->
		<script src="assets/plugins/bootstrap-datepicker/bootstrap-datepicker.js"></script>

		<!--Bootstrap-colorpicker js-->
		<script src="assets/plugins/bootstrap-colorpicker/bootstrap-colorpicker.min.js"></script>

		<!--Bootstrap-timepicker js-->
		<script src="assets/plugins/bootstrap-timepicker/bootstrap-timepicker.js"></script>

		<!--TreeTable js-->
		<script src="assets/plugins/layui/layui.js"></script>

		<!--countUp js-->
		<script type="text/javascript" src="assets/plugins/count-up/jquery.countup.js"></script>
		<script type="text/javascript" src="assets/plugins/count-up/jquery.waypoints.min.js"></script>

		<!--后台接口-->
		<script src="js/index.js"></script>
		<script src="js/menu.js"></script>
	</body>
</html>